
@import url('./variables.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
  font-family: 'STIX Two Math';
  src:  url(../assets/STIXTwoMath-Regular.woff2) format('woff2'),
        url(../assets/STIXTwoMath-Regular.otf) format('opentype'),
        url(../assets/STIXTwoMath-Regular.ttf) format('truetype');
}

:root {

  --font-family-serif: Garamond, Georgia, Times, 'Times New Roman', serif;

  --form-normal-font-size: 12.5px;
  --form-medium-font-size: 13.5px;
  --form-large-font-size: 14px;

  --background-color: var(--color-surface-lowest);
  --background-color-light: var(--color-surface);
  --border-color: var(--color-outline-variant);
  --window-bg-color: #e0e0e0;
  --text-color: var(--color-on-surface);
  --dimmed-text-color: color-mix(in srgb, var(--color-on-surface), var(--color-on-surface-variant) 50%);
  --faded-text-color: var(--color-on-surface-variant);
  --icon-color: var(--color-on-surface-variant);
  --highlight-color: var(--color-primary);
  --highlighted-color: var(--color-on-primary);
  --link-color: var(--color-secondary);

  --window-decoration-color: var(--background-color);
  --window-menubar-width: 3.75rem;
  --window-toolbar-height: 3rem;
  --window-footer-height: 2.5rem;

  --menubar-bg-color: var(--window-decoration-color);
  --menubar-border-color: var(--border-color);
  --menubar-icon-color: var(--icon-color);
  --menubar-highlight-color: var(--highlight-color);

  --toolbar-border-color: transparent;

  --control-bg-color: color-mix(in srgb, var(--color-surface), var(--color-surface-lowest) 50%);
  --control-disabled-bg-color: #fdfdfd;
  --control-border-color: var(--border-color);
  --control-border-radius: var(--radius-sm);
  --control-text-color: var(--text-color);
  --control-button-border-color: var(--border-color);
  --control-button-border-radius: var(--control-border-radius);
  --control-button-active-bg-color: #f2f2f2;
  --control-button-disabled-bg-color: #f2f2f2;
  --control-button-disabled-border-color: var(--border-color);
  --control-button-disabled-text-color: var(--color-outline-variant);
  --control-textarea-bg-color: var(--control-bg-color);
  --control-placeholder-text-color: rgb(117, 117, 117);
  --control-list-bg-color: var(--background-color);
  --control-list-border-color: #d4d4d4;
  --control-checkbox-bg-color: var(--background-color);

  --sidebar-width: 300px;
  --sidebar-bg-color: var(--background-color);
  --sidebar-border-color: var(--border-color);
  --sidebar-scroll-thumb-color: #888;
  --sidebar-text-color: var(--dimmed-text-color);
  --sidebar-icon-color: var(--icon-color);
  --sidebar-selected-color: #e8e8e8;
  --sidebar-search-bg-color: #fcfcfc;
  --sidebar-search-border-color: #ccc;
  --sidebar-search-icon-color: #6b6b6b;
  --sidebar-section-title-color: #919191;
  --sidebar-logo-size: 32px;

  --scrollbar-bg-color: var(--background-color-light);
  --scrollbar-thumb-color: #c2c2c2;

  --chatarea-toolbar-bg-color: var(--window-decoration-color);
  --chatarea-toolbar-text-color: var(--dimmed-text-color);
  --chatarea-toolbar-icon-color: var(--dimmed-text-color);

  --message-list-bg-color: var(--color-surface-lowest);
  --message-list-text-color: var(--text-color);
  --message-list-tip-text-color: #888;
  --message-list-actions-text-color: #909090;
  --message-list-overflow-bg-color: var(--background-color);
  --message-list-overflow-border-color: #ccc;

  --tool-border-color: var(--control-border-color);
  --tool-bg-color: #fcfcfc;
  --tool-key-text-color: #686868;
  --tool-value-text-color: var(--highlight-color);

  --info-panel-width: 300px;

  --large-panel-width: 300px;

  --prompt-icon-color: var(--icon-color);
  --prompt-input-bg-color: var(--background-color);
  --prompt-input-border-color: #e6e6e6;
  --prompt-input-text-color: var(--text-color);

  --dialog-border-color: #d0d0d0;
  --dialog-header-bg-color: #ececec;
  --dialog-header-text-color: #666;
  --dialog-body-bg-color: #ececec;
  --dialog-body-text-color: var(--text-color);
  --dialog-separator-color: #d3d3d3;

  --editor-border-color: var(--dialog-border-color);
  --editor-header-bg-color: var(--background-color);
  --editor-body-bg-color: var(--background-color);

  --tabs-header-normal-text-color: var(--text-color);
  --tabs-header-selected-bg-color: transparent;
  --tabs-header-selected-text-color: var(--color-primary);

  --context-menu-bg-color: var(--background-color);
  --context-menu-border-color: var(--dialog-border-color);
  --context-menu-text-color: var(--text-color);
  --context-menu-selected-bg-color: var(--highlight-color);
  --context-menu-selected-text-color: var(--highlighted-color);
  --context-menu-filter-bg-color: var(--background-color);
  --context-menu-filter-text-color: var(--text-color);

  --actions-bar-bg-color: linear-gradient(to bottom, #fafafa, #f5f5f5);
  --actions-bar-border-color: #b4b4b4;
  --actions-bar-button-border-color: var(--actions-bar-border-color);
  --actions-bar-button-active-bg-color: linear-gradient(to bottom, #c0c0c0, #b5b5b5);

  --anywhere-bg-color: #eee;

  --scratchpad-bars-border-color: #ccc;
  --scratchpad-text-color: #444;
  --scratchpad-placeholder-text-color: #888;
  --scratchpad-actionbar-bg-color: rgba(255, 255, 255, 0.95);
  --scratchpad-actionbar-border-color: #ccc;
  --scratchpad-actionbar-shadow-color: rgba(0, 0, 0, 0.1);
  --scratchpad-actionbbar-active-border-color: #aaa;
  --scratchpad-actionbar-normal-icon-color: #aaa;
  --scratchpad-actionbar-disabled-icon-color: #ddd;
  --scratchpad-actionbar-hover-icon-color: #888;
  --scratchpad-actionbar-active-icon-color: #2991ff;
  --scratchpad-actionbar-active-icon-color2: #0469dc;

  --source-app-bg-color: #ddd;
  --source-app-text-color: var(--dimmed-text-color);

  --window-box-shadow:
    0  1px  1px  rgba(0,0,0,0.20),
    0  2px  2px  rgba(0,0,0,0.20),
    0  4px  4px  rgba(0,0,0,0.20),
    0  8px  8px  rgba(0,0,0,0.20),
    0 16px  16px rgba(0,0,0,0.20);

  --dialog-box-shadow: var(--window-box-shadow);

  --message-reasoning-opacity: 0.66;

}

.windows {
  --window-decoration-color: #efefef;
}

[data-tint=gray], [data-tint=gray] * {
  --menubar-bg-color: var(--background-color);
  --toolbar-border-color: var(--sidebar-border-color);
  --sidebar-bg-color: var(--window-decoration-color);
}


@media (prefers-color-scheme: dark) {
  :root {
    
    --background-color: var(--color-surface-lowest);
    --background-color-light: var(--color-surface-low);
    --border-color: var(--color-outline-variant);
    --window-bg-color: var(--background-color-light);
    --text-color: var(--color-on-surface);
    --dimmed-text-color: #d0d0d0;
    --faded-text-color: var(--color-on-surface-variant);
    --icon-color: var(--color-on-surface-variant);
    --highlight-color: var(--color-primary);
    --link-color: var(--color-secondary);
    
    --default-window-decoration-color: #404040;
    --window-decoration-color: var(--default-window-decoration-color);
    --menubar-bg-color: var(--window-decoration-color);
    --menubar-highlight-color: var(--link-color);
    
    --control-bg-color: #646464;
    --control-border-color: var(--control-bg-color);
    --control-text-color: #e0e0e0;
    --control-button-border-color: var(--control-bg-color);
    --control-button-active-bg-color: #7a7a7a;
    --control-button-disabled-bg-color: #444;
    --control-button-disabled-border-color: var(--control-button-disabled-bg-color);
    --control-button-disabled-text-color: #707070;
    --control-placeholder-text-color: var(--icon-color);
    --control-list-border-color: #6e6e6e;
    --control-checkbox-bg-color: #545454;
    
    --sidebar-bg-color: #292929;
    --sidebar-text-color: var(--text-color);
    --sidebar-border-color: var(--border-color);
    --sidebar-scroll-thumb-color: var(--scrollbar-thumb-color);
    --sidebar-selected-color: var(--highlight-color);
    --sidebar-search-bg-color: #404040;
    --sidebar-search-border-color: #606060;
    --sidebar-section-title-color: var(--icon-color);
    
    --scrollbar-bg-color: var(--background-color-light);
    --scrollbar-thumb-color: #787878;
    
    --chatarea-toolbar-bg-color: var(--window-decoration-color);
    --chatarea-toolbar-text-color: var(--dimmed-text-color);
    --chatarea-toolbar-icon-color: var(--dimmed-text-color);
    
    --message-list-bg-color: var(--color-surface-lowest);
    --message-list-text-color: var(--text-color);
    --message-list-tip-text-color: var(--text-color);
    --message-list-actions-text-color: var(--icon-color);
    --message-list-overflow-bg-color: #000;
    
    --tool-bg-color: #232323;
    --tool-key-text-color: #adadad;
    
    --prompt-input-border-color: #3c3c3c;
    --prompt-input-text-color: var(--sidebar-text-color);
    
    --dialog-border-color: #777;
    --dialog-header-bg-color: #373737;
    --dialog-header-text-color: #9f9f9f;
    --dialog-body-bg-color: #282828;
    --dialog-separator-color: #0f0f0f;
    
    --editor-header-bg-color: var(--dialog-body-bg-color);
    --editor-body-bg-color: var(--dialog-body-bg-color);
    
    --tabs-header-normal-text-color: #b4b4b4;
    --tabs-header-selected-bg-color: #444;
    --tabs-header-selected-text-color: rgb(17, 136, 255);
    
    --context-menu-bg-color: rgb(46, 46, 46);
    --context-menu-border-color: #5c5c5c;
    --context-menu-selected-bg-color: var(--highlight-color);
    --context-menu-filter-bg-color: var(--sidebar-search-bg-color);
    --context-menu-filter-text-color: var(--sidebar-text-color);
    
    --actions-bar-bg-color: linear-gradient(to bottom, rgb(72, 72, 72), rgb(66, 66, 66));
    --actions-bar-border-color: #6e6e6e;
    --actions-bar-button-border-color: var(--actions-bar-border-color);
    --actions-bar-button-active-bg-color: linear-gradient(to bottom, rgb(94, 94, 94), rgb(84, 84, 84));
    
    --anywhere-bg-color: var(--window-bg-color);
    
    --scratchpad-bars-border-color: #555;
    --scratchpad-text-color: var(--text-color);
    --scratchpad-placeholder-text-color: var(--control-placeholder-text-color);
    --scratchpad-actionbar-bg-color: rgba(56, 56, 56, 0.95);
    --scratchpad-actionbar-border-color: #888;
    --scratchpad-actionbar-shadow-color: rgba(255, 255, 255, 0.0);
    --scratchpad-actionbbar-active-border-color: #bbb;
    --scratchpad-actionbar-normal-icon-color: #bbb;
    --scratchpad-actionbar-disabled-icon-color: #666;
    --scratchpad-actionbar-hover-icon-color: #eee;
    
    --source-app-bg-color: #fff;
    --source-app-text-color: #202020;
    
    --dialog-box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 2px 2px rgba(0,0,0,.25), 0 4px 4px rgba(0,0,0,.25), 0 8px 8px rgba(0,0,0,.25), 0 16px 16px rgba(0,0,0,.25);
    --message-reasoning-opacity: 0.80;
  
  }
  
  .windows {
    --window-decoration-color: var(--default-window-decoration-color);
  }

  [data-tint=blue], [data-tint=blue] * {
  
    --background-color: var(--color-surface-lowest);
    --background-color-light: var(--color-surface-low);
    --border-color: var(--color-outline-variant);
    --window-bg-color: var(--background-color-light);
    --text-color: var(--color-on-surface);
    --dimmed-text-color: rgb(140, 160, 180);
    --faded-text-color: var(--color-on-surface-variant);
    --icon-color: var(--color-on-surface-variant);
    --highlight-color: var(--color-primary);
    --link-color: var(--color-secondary);
  
    --default-window-decoration-color: rgb(40, 50, 65);
    --window-decoration-color: var(--default-window-decoration-color);
    --menubar-bg-color: var(--window-decoration-color);
    --menubar-icon-color: var(--icon-color);
  
    --control-bg-color: var(--color-outline-variant);
    --control-border-color: var(--control-bg-color);
    --control-text-color: rgb(210, 220, 230);
    --control-button-border-color: var(--control-bg-color);
    --control-button-active-bg-color: rgb(75, 95, 115);
    --control-button-disabled-bg-color: rgb(35, 55, 75);
    --control-button-disabled-border-color: var(--control-button-disabled-bg-color);
    --control-button-disabled-text-color: var(--icon-color);
    --control-textarea-bg-color: var(--background-color);
    --control-placeholder-text-color: var(--icon-color);
    --control-list-bg-color: var(--background-color);
    --control-list-border-color: rgb(100, 100, 100);
    --control-checkbox-bg-color: rgb(60, 80, 100);
  
    --sidebar-bg-color: var(--window-bg-color);
    --sidebar-text-color: var(--text-color);
    --sidebar-border-color: var(--border-color);
    --sidebar-scroll-thumb-color: var(--scrollbar-thumb-color);
    --sidebar-icon-color: var(--icon-color);
    --sidebar-selected-color: var(--highlight-color);
    --sidebar-search-bg-color: rgb(64, 74, 84);
    --sidebar-search-border-color: rgb(76, 96, 116);
    --sidebar-section-title-color: var(--icon-color);
  
    --scrollbar-bg-color: var(--background-color-light);
    --scrollbar-thumb-color: var(--color-outline);
  
    --chatarea-toolbar-bg-color: rgb(40, 50, 65);
    --chatarea-toolbar-text-color: var(--text-color);
    --chatarea-toolbar-icon-color: var(--text-color);
  
    --message-list-bg-color: var(--background-color);
    --message-list-text-color: var(--text-color);
    --message-list-tip-text-color: var(--text-color);
    --message-list-actions-text-color: var(--icon-color);
    --message-list-overflow-bg-color: rgb(10, 20, 50);
  
    --tool-bg-color: #132131;
    --tool-key-text-color: #73889a;
  
    --prompt-icon-color: var(--icon-color);
    --prompt-input-bg-color: var(--message-list-bg-color);
    --prompt-input-border-color: rgb(60, 70, 90);
    --prompt-input-text-color: var(--sidebar-text-color);
  
    --dialog-border-color: rgb(86, 86, 96);
    --dialog-header-bg-color: rgb(40, 50, 65);
    --dialog-header-text-color: rgb(180, 180, 190);
    --dialog-body-bg-color: var(--background-color-light);
    --dialog-body-text-color: var(--text-color);
    --dialog-separator-color: rgb(20, 20, 30);
  
    --editor-border-color: var(--dialog-border-color);
    --editor-header-bg-color: var(--dialog-body-bg-color);
    --editor-body-bg-color: var(--dialog-body-bg-color);
  
    --tabs-header-normal-text-color: rgb(170, 170, 180);
    --tabs-header-selected-bg-color: rgb(58, 68, 78);
    --tabs-header-selected-text-color: rgb(7, 126, 246);
  
    --context-menu-bg-color: var(--color-surface-low);
    --context-menu-border-color: rgb(70, 80, 90);
    --context-menu-text-color: var(--text-color);
    --context-menu-selected-bg-color: var(--highlight-color);
    --context-menu-filter-bg-color: var(--sidebar-search-bg-color);
    --context-menu-filter-text-color: var(--sidebar-text-color);
  
    --actions-bar-bg-color: linear-gradient(to bottom, rgb(61, 71, 81), rgb(55, 65, 75));
    --actions-bar-border-color: var(--color-outline);
    --actions-bar-button-border-color: var(--actions-bar-border-color);
    --actions-bar-button-active-bg-color: linear-gradient(to bottom, rgb(83, 93, 103), rgb(73, 83, 93));
  
    --anywhere-bg-color: var(--window-bg-color);
  
    --scratchpad-bars-border-color: #555;
    --scratchpad-text-color: var(--text-color);
    --scratchpad-placeholder-text-color: var(--control-placeholder-text-color);
    --scratchpad-actionbar-bg-color: rgba(46, 56, 66, 0.95);
    --scratchpad-actionbar-border-color: #789;
    --scratchpad-actionbar-shadow-color: rgba(255, 255, 255, 0.0);
    --scratchpad-actionbbar-active-border-color: #99a;
    --scratchpad-actionbar-normal-icon-color: #99a;
    --scratchpad-actionbar-disabled-icon-color: #566;
    --scratchpad-actionbar-hover-icon-color: #cde;
    
    .windows {
      --window-decoration-color: var(--default-window-decoration-color);
    }

  }
}

* {
  font-family: var(--font-family-base);
}

/* to display emojis on widows */
@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

body {
  margin: auto;
  user-select: none;
  overflow: hidden;
}

code, pre, code * {
  font-family: SF Mono,Monaco,Andale Mono,Ubuntu Mono,monospace !important;
  font-size: 13.5px;
}

a, a:visited, a:active, a:focus {
  color: var(--link-color);
}

::placeholder {
  color: var(--control-placeholder-text-color);
}

input, select, textarea {
  
  flex: 1;
  padding: 4px;
  border-radius: var(--control-border-radius);
  border: 1px solid var(--control-border-color);
  background-color: var(--control-bg-color);
  color: var(--control-text-color);
  font-size: var(--form-normal-font-size);
  width: 100%;

  &.medium {
    font-size: var(--form-medium-font-size);
  }

  &.large {
    font-size: var(--form-large-font-size);
  }

  &:focus {
    outline: none;
  }

  &:disabled {
    background-color: var(--control-button-disabled-bg-color);
    color: var(--control-button-disabled-text-color);
    cursor: not-allowed;
  }
}

textarea {
  background-color: var(--control-textarea-bg-color);
  scrollbar-color: var(--scrollbar-thumb-color) var(--control-textarea-bg-color);
}

input[type=checkbox] {
  outline: none;
  appearance: none;
  padding: 0;
  width: 20px;
  height: 20px;
  min-width: 20px !important;
  max-width: 20px !important;
  border-radius: 3.5px;
  background: var(--control-checkbox-bg-color);
  border: 2px solid var(--color-outline);
  cursor: pointer;

  &:after {
    position: relative;
    display: inline-block;
    color: transparent;
    content: '\2713';
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transform: scaleX(1.1) scaleY(0.9);
    left: 4px;
    top: 0.5px;
  }

  &:checked {
    border: none;
    background: var(--color-primary);
    &:after {
      color: var(--color-on-primary);
    }
  }

  &:not(:checked) {
    font-size: 0px;
  }

  &:disabled {
    background: var(--color-outline);
  }

  &:not(:checked)[data-indeterminate=true] {
    border: none;
    background: var(--color-primary);
    &:after {
      color: var(--color-on-primary);
      font-weight: 900;
      content: '\2013';
      left: 6px;
      top: 0.25px;
    }
  }

  &.sm {
    width: 16px;
    height: 16px;
    min-width: 16px !important;
    max-width: 16px !important;
    border-width: 1px;

    &:after {
      font-size: 11px;
      top: -0.5px;
      left: 3px;
    }

  }

  &.xs {
    width: 14px;
    height: 14px;
    min-width: 14px !important;
    max-width: 14px !important;
    border-width: 1px;

    &:after {
      font-size: 10px;
      top: -1.5px;
      left: 2px;
    }

  }

}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  background-color: #d1d1d1;
  height: 4px;
  padding: 0px;
  margin: 4px 0px;
  width: 100%;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    width: 8pt;
    height: 16pt;
    border-radius: 4pt;
    background: white;
    border: 1px solid #c1c1c1;
    cursor: pointer;
    z-index: 2;
    position: relative;
  }

  + datalist option {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 1px;
    height: 8px;
    min-height: 0px;
    background: #a1a1a1;
    margin-top: 6px;
  }
}

datalist {
  display: flex;
  justify-content: space-between;
  margin-top: -16px;
  margin-left: 2px;
  margin-right: 12px;
  margin-top: -16px;
}

button {
  box-sizing: border-box;
  width: auto;
  margin: 0 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--control-button-border-radius);
  background-color: var(--control-bg-color);
  border: 1px solid var(--control-button-border-color);
  cursor: pointer;
  color: var(--control-text-color);
  font-size: var(--form-normal-font-size);
  font-weight: var(--font-weight-medium);
  outline: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  
  span {
    margin-top: 0 !important;
  }

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
    stroke-width: 2px;
  }

  &:active:enabled {
    background-color: var(--control-button-active-bg-color);
  }

  &:disabled {
    border: 1px solid var(--control-button-disabled-border-color);
    color: var(--control-button-disabled-text-color);
    cursor: not-allowed;
  }

  &.medium {
    font-size: var(--form-medium-font-size);
    padding: 0.5rem;
  }

  &.large {
    font-size: var(--form-large-font-size);
    padding: 0.5rem 0.75rem;
  }

  &.default, &.primary {
    border: 0px !important;
    background-color: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
    &:active:enabled {
      background-color: var(--color-secondary) !important;
      color: var(--color-on-secondary) !important;
    }
  }

  &.secondary {
    border: 1px solid var(--border-color) !important;
    background-color: transparent!important;
    color: var(--color-primary) !important;
  }

  &.tertiary {
    border: 1px solid transparent !important;
    background-color: transparent!important;
    color: var(--color-on-surface-variant) !important;
  }

  &.destructive {
    color: red;
  }

  &.cta {
    padding: 1rem;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    white-space: nowrap;
    gap: 0.75rem;
    svg {
      width: var(--icon-xl);
      height: var(--icon-xl);
    }
    &:active:enabled {
      background-color: var(--color-secondary) !important;
      color: var(--color-on-secondary) !important;
    }
  }

}

.button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-base);
  border-radius: var(--control-button-border-radius);
  padding: 0.25rem;
  gap: 0.125rem;
}

.button-group button {
  cursor: pointer;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  margin: 0px;
}

.button-group button:not(.active) {
  background-color: transparent;
  border-color: transparent;
  color: var(--faded-text-color);
  border-radius: 0;
}

@media (prefers-color-scheme: dark) {
  .button-group button:not(.active) {
    background-color: color-mix(in srgb, var(--control-bg-color), var(--background-color) 40%);
    border-color: color-mix(in srgb, var(--control-bg-color), var(--background-color) 40%);
  }
}

.button-group button.active {
  border-radius: var(--control-button-border-radius) !important;
}

.button-group button:first-child {
  border-radius: var(--control-button-border-radius) 0 0 var(--control-button-border-radius);
}

.button-group button:last-child {
  border-radius: 0 var(--control-button-border-radius) var(--control-button-border-radius) 0;
}

table th.center, table td.center {
  text-align: center;
}

table.table-plain {

  border-collapse: collapse;
  
  th, td {
    padding: 0.75rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 14px;
  }

  tr.spacer {
    height: 0.25rem;
    background-color: var(--background-color);
  }

  td {
    .actions {
      display: inline-flex;
      align-items: center;
      gap: 0rem;

      svg {
        cursor: pointer;
        width: var(--icon-lg);
        height: var(--icon-lg);
      }
    }
  }

}

.window {

  display: flex;
  flex-direction: column;
  height: 100vh;

  > header {
    -webkit-app-region: drag;
    flex: 0 0 var(--window-toolbar-height);
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    user-select: none;
  }

  > main {
    flex: 1;
    display: flex;
    flex-direction: row;
    max-height: calc(100vh - var(--window-toolbar-height) - 2.5rem);
  }

  > footer {

    -webkit-app-region: drag;

    box-sizing: border-box;
    flex: 0 0 var(--window-footer-height);
    background-color: var(--background-color);
    border-top: 1px solid var(--border-color);
    padding: 0rem 0.75rem;
    color: var(--text-color);

    display: flex;
    flex-direction: row;
    align-items: center;
    
    font-size: 13.5px;
    color: var(--faded-text-color);

    .actions {
      -webkit-app-region: no-drag;
      margin-left: auto;
      display: flex;
      gap: 1rem;
      svg {
        cursor: pointer;
      }
    }

  }

}

.tag {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 10.5px;
  border-radius: 0.75rem;

  &.info {
    background-color: var(--color-secondary-container);
    color: var(--color-secondary);
  }

  &.success {
    background-color: var(--color-success-container);
    color: var(--color-success);
  }

  &.error {
    background-color: var(--color-error-container);
    color: var(--color-error);
  }

  &.warning {
    background-color: var(--color-warning-container);
    color: var(--color-warning);
  }
}

.lucide {
  width: var(--icon-md);
  height: var(--icon-md);
}

.flex-push {
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.fade-in-scale {
  animation: fadeInScale 0.2s ease-out;
}

.slide-in-bottom {
  animation: slideInFromBottom 0.4s ease-out;
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface-low) 0%,
    var(--color-surface-high) 50%,
    var(--color-surface-low) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}
